<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../assets/bootstrap.min.css">
    <script src="../../assets/jquery-3.2.1.min.js"></script>
    <script src="../../assets/bootstrap.min.js"></script>
    <script src="./validate/jquery.validate.min.js"></script>
    <script src="./validate/additional-methods.js"></script>
    <script src="./validate/localization/messages_zh.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        .contents{
            margin-top: 50px;
            background-color: #888;
        }
        .cont{
            background-color: #ccc;background-color: white;
            min-height: 200vh;
            position: relative;
        }
        .imgBox {
            height: 300px;
            padding: 40px;
            padding-top: 60px;
        }
        .imgBox .hr{
            display: flex;
            flex-direction: row-reverse;
            margin-top: 50px;
            margin-bottom: 20px;
        }
        .imgBox .hr div{
            width: 60%;
            height: 8px;
            background-color: white;
        }
        .imgBox p:nth-of-type(2){
            text-align: right;
        }
        .imgBox p{
            font-size: 24px;
            color: white;
            text-indent: 2em;
            line-height: 40px;
        }
        .imgBox img{
            width: 220px;
            height: 220px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        #bbb{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 300px;
            background-color: #bbb;
        }
        .imgs{
            text-align: center;
        }
        .imgs img{
            width: 80%;
        }

        /* callme */
        .callme{
            text-align: center;
            
        }
        .callme .text{
            text-align: left;
            padding-right: 100px;
            padding-top: 60px;
        }
        .callme .text p{
            color: #666;
            font-size: 24px;
            margin: 20px 0;
            line-height: 38px;
        }
        #meFrom{
            width: 80%;
            margin: 0 auto;
            text-align: left;
            font-size: 18px;
            line-height: 18px;
            padding-bottom: 40px;
        }
        #meFrom input,#meFrom textarea{
            border: none;
            outline: none;
            width: 100%;
            font-size: 30px;
            height: 40px;
            margin-top: 15px;
        }
        .items{
            position: relative;
            border-bottom: solid 1px #999;
            margin-top: 10px;
        }
        #meFrom textarea{
            height: 100px;
            line-height: 40px;
        }
        .items label{
            color: #999;
        }
        .items .labName2{
            position: absolute;
            opacity: 0;
            color: #722872;
            left: 0;
            top: 50px;
            transition: all 0.4s;
        }
        .none{
            
            /* display: none; */
            visibility: hidden;
        }
        .items div{
            height: 80px;
        }
        .items .labName2.none1{
            opacity: 1;
            top: 0px;
        }
        .items1{
            padding: 30px 0;
        }
        .items1 button{
            background-color: #5AA7F1;
            border-radius: 4px;
            border: none;
            width: 80px;
            height: 40px;
            color: white;
            line-height: 40px;
            
        }
        label.error,
        em.error {
            font-weight: normal!important;
            width: auto!important;
            color: red;
            font-size: 12px!important;

        }
        input.error {
            border-color: red!important;
        }
        .navbar-default .li-click.active,.navbar-default .navbar-nav>li>a.active:hover{
            color: white;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <!-- 导航条 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="collapseBtn">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand">WPP</a>
            </div>
        
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="li-click active" scrolls='#one'>第一个</a></li>
                <li><a class="li-click" scrolls='#two'>第二个</a></li>
                <li><a class="li-click" scrolls='#three'>第三个</a></li>
            </ul>
            </div>
        </div>
    </nav>

    <div class="contents">
        <div class="container cont" id="one">
            <div id="bbb"></div>
            <div class="row" >
                <div class="col-md-8 imgBox">
                    <p>
                        前端开发者和用户体验设计师，在项目管理、实践经验的品牌策略、创意方向；
                        致力于功能规划和信息架构。
                    </p>    
                    <div class="hr"><div></div></div>
                    <p>网页设计师-用户体验设计师-平面艺术家</p>
                </div>
                <div class="col-md-4 imgBox">
                    <img src="../images/尤雨溪1.jpg" alt="">
                </div>
            </div>


            <!-- 图片 -->
            <div class="imgs">
                <h1 id="two">照片</h1>

                <div class="row">
                    <div class="col-md-6">
                        <img src="../images/27.png" alt="">
                    </div>
                    <div class="col-md-6">
                            <img src="../images/26.png" alt="">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <img src="../images/21.jpg" alt="">
                    </div>
                    <div class="col-md-6">
                        <img src="../images/22.jpg" alt="">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <img src="../images/23.jpg" alt="">
                    </div>
                    <div class="col-md-6">
                        <img src="../images/24.jpg" alt="">
                    </div>
                </div>
            </div>

            <!-- 联系我 -->
            <div class="callme">
                <h1 id="three">联系我</h1>
                <div class="row">
                    <div class="col-md-6 item">
                        <form action="" id="meFrom">
                            <div class="items">
                                <label for="" class="labName none">姓名</label>
                                <label for="" class="labName2">姓名</label>
                                <div>
                                    <input 
                                        type="text" 
                                        placeholder="姓名" 
                                        name='name'
                                        autocomplete="off"
                                        id="name"
                                        class="input" required maxlength="10"
                                        title='最多10位字符'
                                        oninvalid="setCustomValidity('不能为空')" oninput="setCustomValidity('')"
                                        >
                                </div>
                            </div>
                            <div class="items">
                                <label for="" class="labName none">email</label>
                                <label for="" class="labName2">email</label>
                                <div>
                                    <input 
                                        name="email"
                                        type="text" 
                                        placeholder="email" 
                                        autocomplete="off"
                                        id="email"
                                        class="input" required minlength="5" 
                                        oninvalid="setCustomValidity('5位以上邮箱')" oninput="setCustomValidity('')">
                                </div>
                            </div>
                            <div class="items">
                                <label for="" class="labName none">phone</label>
                                <label for="" class="labName2">phone</label>
                                <div>
                                    <input 
                                        type="text" 
                                        placeholder="phone" 
                                        autocomplete="off"
                                        id="phone"
                                        class="input"  maxlength="11"
                                        name='phone'
                                        >
                                </div>
                            </div>
                            <div class="items">
                                <label class="labName none">Message</label>
                                <label class="labName2">Message</label>
                                <div>
                                    <textarea 
                                         id="" 
                                        cols="30" rows="10"
                                        placeholder="Message" 
                                        class="input"
                                        required maxlength="200"
                                        name='message'
                                    ></textarea>
                                </div>
                            </div>
                            <div class="items1"><button>联系我</button></div>
                        </form>
                    </div>
                    <div class="col-md-6 item text">
                        <p>
                            想和我联系吗？它要求更多关于我自己或我的经验信息，问我的简历，如何解决你的数独，关于宇宙和生命的意义的随机
                            问题，或即使只是在一些不错的瞬间念头…
                        </p>
                        <p>只要随时给我写信就行了。</p>
                        <p>我答应尽快回复</p>
                        <p></p>
                    </div>
                </div>
            </div>
            
        </div>



    </div>
    <footer style="height:200px;background-color:#AAAAAA" >
        <div class="container">
            <div class="row ">
                <div class="col-sm-6">
                    <p>关于这一页</p>
                </div>
                <div class="col-sm-6">
                    <p>关于我的联系方式</p>
                </div>
            </div>
        </div>
        
    </footer>
        
</body>
<script>
    // 定义数字
    var arr = [];    
    $(".items .input").on('input',function(){
        if($(this).val()){
            $(this).parent().parent().children('.labName2').addClass('none1');
        }else{
            $(this).parent().parent().children('.labName').addClass('none');
            $(this).parent().parent().children('.labName2').removeClass('none1');
        }
    })
    $(".items .input").on('blur',function(){
        $(this).parent().parent().children('.labName2').css('display','none');
        if($(this).val()){
            $(this).parent().parent().children('.labName').removeClass('none');
        }
    })
    $(".items .input").on('focus',function(){
        $(this).parent().parent().children('.labName2').css('display','block');
    });
    // $('#meFrom').on('submit',function(e){
    //     e.preventDefault();
    //     console.log('该提交了')
    // })






    // 点击滚动
    $('.li-click').on('click',function(){
        var scroll_offset = $($(this).attr('scrolls')).offset();
        $("body,html").animate({  
            scrollTop:scroll_offset.top-50 //让body的scrollTop等于pos的top，就实现了滚动  
        });
        setTimeout(() => {
            $('#collapseBtn').trigger('click');
        }, 500);
    });


   $(document).ready(function(){
        
        $(window).scroll(function () {
            arr = [];
            for(var i=0;i<$('.li-click').length;i++){
                arr.push($($('.li-click').eq(i).attr('scrolls'))[0].offsetTop)
            }
            for(var j=arr.length-1;j>=0;j--){
                if($(window).scrollTop()>=arr[j]){
                    $('.li-click').removeClass('active');
                    $('.li-click').eq(j).addClass('active');
                    break;
                }
            }
        });
   })





// 验证表单
$('#meFrom').validate({
    rules: {
        name: {
            required: true,
            rangelength:[2,8],
        },
        email: {
            required: true,
            isZipCode:true
            
        },
        phone: {
            required: true,
            chineseMobile: 'required'
        },
        message: {
            required: true,
            maxlength:200,
        }
    },
    messages: {
        name: {
            required: '用户名不能为空',
            rangelength:'用户名为2-12位',
        },
        email: {
            required: '邮箱不能为空',
        },
        phone: {
            required: '手机号码不能为空',
            
        },
        message: {
            required: '请填写联系内容',
            maxlength:'最多200字描述',
        }

    },
    //更改提示错误信息的显示位置
    errorPlacement: function(error, element) {
            error.appendTo(element.parent());
    },
    submitHandler: function(form) {
    console.log("发现错误位置")
    }
});


// 自定义邮箱验证         
$.validator.addMethod("isZipCode", function(value, element) {         
    var tel = /^[0-9]{6}$/;         
    return this.optional(element) || (tel.test(value));         
}, "请正确填写您的邮箱");
</script>
</html>